<template lang="html">
    <div>
        <HomeHeader />
        <div class="minHeight">
            <div class="top_tab">
                <span>全部分类 <i class="iconfont icon-xiangxia"></i></span>
                <span>综合排序 <i class="iconfont icon-xiangxia"></i></span>
            </div>
            <tabs :defaultValue="defaultValue" @getRel="setDefaultValue">
                <tab :label="item" :rel="index+1" :key="index" v-for="(item,index) in categories">
                    <div>{{item}}</div>
                </tab>
            </tabs>
        </div>
        <FooterNav />
    </div>
</template>
<script>
import HomeHeader from "../components/homeHeader"
import FooterNav from "../components/footNav";
export default {
    name: 'Shop',
    data() {
        return {
            defaultValue: 1,
            categories: []
        }
    },
    components: {
        HomeHeader,
        FooterNav
    },
    mounted() {
        this.$axios.get(this.HOST + '/data/getCategoryProduct?asid=5bfb9aeab1ed19601&_r=0.09138284392352536&reflogid=5bffdff2f36ba1170&location_hash=509a23le0oIEligeu0B%2BiFYxUvKfWMf2J5XX5GKAU8XgOftpN06vzHIFONL9CtZPVjh51Acuc63Z5dK4Vq&zchtid=4767&bigids=2%2C0')
            .then(r => {
                let tmp = eval('(' + r.data + ')').data;
                console.log(tmp);
                this.categories = tmp.categories.map((item) => item.name);
            })
    },
    methods: {
        setDefaultValue(v) {
            this.defaultValue = v;
        }
    }
}
</script>
<style lang="less" scoped>
.minHeight {
    position: absolute;
    top: 1.1rem;
    left: 0;
    height: calc(100% - 2.24rem);
    width: 100%;
    background: #fff; 

    .top_tab {
        position: absolute;
        top: 0;
        right: 0;
        width: 5.4rem;
        overflow: hidden;
        font-size: 0.32rem;
        font-weight: bold;

        span {
            width: 50%;
            line-height: 0.88rem;
            display: block;
            text-align: center;
            float: left;
            border-bottom: 1px solid #6d6d6d;

            i {
                font-size: 0.3rem;
            }
        }
    }
}
</style>